<%- include('layout', { title: '系统初始化', active: 'init' }) %>

<div class="max-w-2xl mx-auto">
    <div class="anime-card p-8">
        <div class="text-center mb-8">
            <i class="fas fa-cube text-6xl text-purple-500 mb-4"></i>
            <h1 class="text-3xl font-bold anime-gradient-text mb-2">Minecraft面板初始化</h1>
            <p class="text-gray-600">欢迎使用Minecraft服务器管理面板，请完成以下初始化设置</p>
        </div>

        <form id="initForm" class="space-y-6">
            <!-- 管理员账户设置 -->
            <div class="bg-gradient-to-r from-purple-50 to-pink-50 p-6 rounded-xl">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">
                    <i class="fas fa-user-shield mr-2 text-purple-500"></i>管理员账户设置
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
                        <input type="text" name="username" required 
                               class="anime-input w-full" 
                               placeholder="请输入管理员用户名">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">邮箱</label>
                        <input type="email" name="email" required 
                               class="anime-input w-full" 
                               placeholder="请输入管理员邮箱">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">密码</label>
                        <input type="password" name="password" required 
                               class="anime-input w-full" 
                               placeholder="请输入密码">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">确认密码</label>
                        <input type="password" name="confirm_password" required 
                               class="anime-input w-full" 
                               placeholder="请再次输入密码">
                    </div>
                </div>
            </div>

            <!-- 面板设置 -->
            <div class="bg-gradient-to-r from-blue-50 to-cyan-50 p-6 rounded-xl">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">
                    <i class="fas fa-cog mr-2 text-blue-500"></i>面板设置
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">面板名称</label>
                        <input type="text" name="panel_name" required 
                               class="anime-input w-full" 
                               placeholder="Minecraft面板" 
                               value="Minecraft面板">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">面板公网IP</label>
                        <input type="text" name="panel_ip" required 
                               class="anime-input w-full" 
                               placeholder="请输入面板公网IP地址">
                    </div>
                </div>
            </div>

            <!-- 系统检查 -->
            <div class="bg-gradient-to-r from-green-50 to-emerald-50 p-6 rounded-xl">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">
                    <i class="fas fa-check-circle mr-2 text-green-500"></i>系统环境检查
                </h3>
                <div id="systemCheck" class="space-y-3">
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-600">Node.js版本</span>
                        <span id="nodeVersion" class="anime-badge">检查中...</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-600">数据库连接</span>
                        <span id="dbConnection" class="anime-badge">检查中...</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-600">目录权限</span>
                        <span id="dirPermissions" class="anime-badge">检查中...</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-600">Docker支持</span>
                        <span id="dockerSupport" class="anime-badge">检查中...</span>
                    </div>
                </div>
            </div>

            <!-- 初始化按钮 -->
            <div class="text-center">
                <button type="submit" id="initButton" 
                        class="anime-button px-8 py-3 text-lg font-semibold"
                        disabled>
                    <i class="fas fa-rocket mr-2"></i>开始初始化
                </button>
            </div>
        </form>
    </div>
</div>

<script>
// 系统检查函数
async function checkSystem() {
    const checks = {
        nodeVersion: false,
        dbConnection: false,
        dirPermissions: false,
        dockerSupport: false
    };

    // 检查Node.js版本
    try {
        const response = await fetch('/api/system/node-version');
        const data = await response.json();
        if (data.success) {
            document.getElementById('nodeVersion').textContent = data.version;
            document.getElementById('nodeVersion').className = 'anime-badge bg-green-500';
            checks.nodeVersion = true;
        } else {
            document.getElementById('nodeVersion').textContent = '不兼容';
            document.getElementById('nodeVersion').className = 'anime-badge bg-red-500';
        }
    } catch (error) {
        document.getElementById('nodeVersion').textContent = '检查失败';
        document.getElementById('nodeVersion').className = 'anime-badge bg-red-500';
    }

    // 检查数据库连接
    try {
        const response = await fetch('/api/system/db-connection');
        const data = await response.json();
        if (data.success) {
            document.getElementById('dbConnection').textContent = '正常';
            document.getElementById('dbConnection').className = 'anime-badge bg-green-500';
            checks.dbConnection = true;
        } else {
            document.getElementById('dbConnection').textContent = '失败';
            document.getElementById('dbConnection').className = 'anime-badge bg-red-500';
        }
    } catch (error) {
        document.getElementById('dbConnection').textContent = '检查失败';
        document.getElementById('dbConnection').className = 'anime-badge bg-red-500';
    }

    // 检查目录权限
    try {
        const response = await fetch('/api/system/dir-permissions');
        const data = await response.json();
        if (data.success) {
            document.getElementById('dirPermissions').textContent = '正常';
            document.getElementById('dirPermissions').className = 'anime-badge bg-green-500';
            checks.dirPermissions = true;
        } else {
            document.getElementById('dirPermissions').textContent = '权限不足';
            document.getElementById('dirPermissions').className = 'anime-badge bg-red-500';
        }
    } catch (error) {
        document.getElementById('dirPermissions').textContent = '检查失败';
        document.getElementById('dirPermissions').className = 'anime-badge bg-red-500';
    }

    // 检查Docker支持
    try {
        const response = await fetch('/api/system/docker-support');
        const data = await response.json();
        if (data.success) {
            document.getElementById('dockerSupport').textContent = '已安装';
            document.getElementById('dockerSupport').className = 'anime-badge bg-green-500';
            checks.dockerSupport = true;
        } else {
            document.getElementById('dockerSupport').textContent = '未安装';
            document.getElementById('dockerSupport').className = 'anime-badge bg-yellow-500';
            checks.dockerSupport = true; // Docker不是必需的，但建议安装
        }
    } catch (error) {
        document.getElementById('dockerSupport').textContent = '检查失败';
        document.getElementById('dockerSupport').className = 'anime-badge bg-red-500';
    }

    // 启用初始化按钮（如果基本检查通过）
    if (checks.nodeVersion && checks.dbConnection && checks.dirPermissions) {
        document.getElementById('initButton').disabled = false;
    }
}

// 页面加载时执行系统检查
document.addEventListener('DOMContentLoaded', function() {
    checkSystem();
});

// 表单提交处理
document.getElementById('initForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const data = Object.fromEntries(formData);
    
    // 验证密码
    if (data.password !== data.confirm_password) {
        showAlert('密码不匹配', 'error');
        return;
    }
    
    if (data.password.length < 6) {
        showAlert('密码长度至少为6位', 'error');
        return;
    }
    
    // 禁用按钮
    const button = document.getElementById('initButton');
    button.disabled = true;
    button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>初始化中...';
    
    try {
        const response = await fetch('/auth/init', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });
        
        const result = await response.json();
        
        if (result.success) {
            showAlert('初始化成功！正在跳转到登录页面...', 'success');
            setTimeout(() => {
                window.location.href = '/login';
            }, 2000);
        } else {
            showAlert(result.error || '初始化失败', 'error');
            button.disabled = false;
            button.innerHTML = '<i class="fas fa-rocket mr-2"></i>开始初始化';
        }
    } catch (error) {
        showAlert('初始化失败：' + error.message, 'error');
        button.disabled = false;
        button.innerHTML = '<i class="fas fa-rocket mr-2"></i>开始初始化';
    }
});
</script>

<%- scripts %>